@borderColor:#ccc;
//less 方法
.fs(@fontSize) when (isnumber(@fontSize)){
  font-size: unit(@fontSize,px);
}
.w(@width) when (isnumber(@width)){
  width: unit(@width,px);
}
.h(@height) when (isnumber(@height)){
  height: unit(@height,px);
}
.lh(@lightHeight) when (isnumber(@lightHeight)){
  line-height: unit(@lightHeight,px);
}
.padding(@padding){
  padding: unit(@padding,px);
}
.padding(@paddingTB,@paddingLR) when (isnumber(@paddingTB)),(isnumber(@paddingTB)){
  padding: unit(@paddingTB,px) unit(@paddingLR,px);
}
.pt(@paddingTop) when (isnumber(@paddingTop)){
  padding-top: unit(@paddingTop,px);
}
.pl(@paddingLeft) when (isnumber(@paddingLeft)){
  padding-left: unit(@paddingLeft,px);
}
.pr(@paddingRight) when (isnumber(@paddingRight)){
  padding-right: unit(@paddingRight,px);
}
.pb(@paddingBottom) when (isnumber(@paddingBottom)){
  padding-bottom: unit(@paddingBottom,px);
}


.margin(@margin){
  margin: unit(@margin,px);
}
.margin(@marginTB,@marginLR) when (isnumber(@marginTB)),(isnumber(@marginTB)){
  margin: unit(@marginTB,px) unit(@marginLR,px);
}
.mt(@marginTop) when (isnumber(@marginTop)){
  margin-top: unit(@marginTop,px);
}
.ml(@marginLeft) when (isnumber(@marginLeft)){
  margin-left: unit(@marginLeft,px);
}
.mr(@marginRight) when (isnumber(@marginRight)){
  margin-right: unit(@marginRight,px);
}
.mb(@marginBottom) when (isnumber(@marginBottom)){
  margin-bottom: unit(@marginBottom,px);
}

.top(@top) when (isnumber(@top)){
  top:unit(@top,px);
}
.bottom(@bottom) when (isnumber(@bottom)){
  bottom:unit(@bottom,px);
}
.left(@left) when (isnumber(@left)){
  left:unit(@left,px);
}
.right(@right) when (isnumber(@right)){
  right:unit(@right,px);
}
.minW(@px){
  min-width: unit(@px,px);
}
.minH(@px){
  max-width: unit(@px,px);
}


.font-size-12{
  .fs(12);
}
.font-size-13{
  .fs(13);
}
.font-size-14{
  .fs(14);
}
.font-size-15{
  .fs(15);
}
.font-size-16{
  .fs(16);
}
.font-size-17{
  .fs(17);
}
.font-size-18{
  .fs(18);
}
.padding-0{
  .padding(0);
}
.padding-5{
  .padding(5);
}
.padding-10{
  .padding(10);
}
.padding-15{
  .padding(15);
}
.padding-20{
  .padding(20);
}
.padding-t-0{
  .pt(0)
}
.padding-t-5{
  .pt(5)
}
.padding-t-10{
  .pt(10)
}
.padding-t-15{
  .pt(15)
}
.padding-t-20{
  .pt(20)
}
.padding-r-0{
  .pr(0)
}
.padding-r-5{
  .pr(5)
}
.padding-r-10{
  .pr(10)
}
.padding-r-15{
  .pr(15)
}
.padding-r-20{
  .pr(20)
}
.padding-b-0{
  .pb(0)
}
.padding-b-5{
  .pb(5)
}
.padding-b-10{
  .pb(10)
}
.padding-b-15{
  .pb(15)
}
.padding-b-20{
  .pb(20)
}
.padding-l-0{
  .pl(0)
}
.padding-l-5{
  .pl(5)
}
.padding-l-10{
  .pl(10)
}
.padding-l-15{
  .pl(15)
}
.padding-l-20{
  .pl(20)
}
.margin-0{
  .margin(0);
}
.margin-5{
  .margin(5);
}
.margin-10{
  .margin(10);
}
.margin-15{
  .margin(15);
}
.margin-20{
  .margin(20);
}
.margin-t-0{
  .mt(0)
}
.margin-t-5{
  .mt(5)
}
.margin-t-10{
  .mt(10)
}
.margin-t-15{
  .mt(15)
}
.margin-t-20{
  .mt(20)
}
.margin-r-0{
  .mr(0)
}
.margin-r-5{
  .mr(5)
}
.margin-r-10{
  .mr(10)
}
.margin-r-15{
  .mr(15)
}
.margin-r-20{
  .mr(20)
}
.margin-b-0{
  .mb(0)
}
.margin-b-5{
  .mb(5)
}
.margin-b-10{
  .mb(10)
}
.margin-b-15{
  .mb(15)
}
.margin-b-20{
  .mb(20)
}
.margin-l-0{
  .ml(0)
}
.margin-l-5{
  .ml(5)
}
.margin-l-10{
  .ml(10)
}
.margin-l-15{
  .ml(15)
}
.margin-l-20{
  .ml(20)
}
.pull-right{
  float: right !important;
}
.pull-left{
  float: left !important;
}
.float-none{
  float: none !important;
}
.text-right{
  text-align: right;
}
.border-no{
  border: none !important;
}
.border{
  border:1px @borderColor solid;
}
.border-t{
  border-top:1px @borderColor solid;
}
.border-r{
  border-right:1px @borderColor solid;
}
.border-b{
  border-bottom:1px @borderColor solid;
}
.border-l{
  border-left:1px @borderColor solid;
}
.text-left{
  text-align: left;
}
.text-center{
  text-align: center;
}
.display-flex{
  display: flex;
}
.display-block{
  display: block;
}
.display-inline{
  display: inline-block;
}
.flex-1{
  flex:1;
}
.over-flow{
  overflow: hidden;
}
.ellipsis-1 {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  word-wrap: break-word;
  word-break: break-all;
  white-space: normal !important;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.ellipsis-2 {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  word-wrap: break-word;
  word-break: break-all;
  white-space: normal !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.clearfix{
  clear: both;
}
.hide{
  display: none;
}
.hide-i{
  display: none !important;
}
.radius-0{
  border-radius:0% !important;
}
.radius-50{
  border-radius:50%;
}
.radius-6{
  border-radius: 6px;
}
.col-1,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-10,.col-11,.col-20 {
  position: relative;
  float: left;
}
.col-12 {
  width: 100%;
  position: relative;
}
.col-11 {
  width: 91.66666667%;
}
.col-10 {
  width: 83.33333333%;
}
.col-9 {
  width: 75%;
}
.col-8 {
  width: 66.66666667%;
}
.col-7 {
  width: 58.33333333%;
}
.col-6 {
  width: 50%;
}
.col-5 {
  width: 41.66666667%;
}
.col-4 {
  width: 33.33333333%;
}
.col-3 {
  width: 25%;
}
.col-2 {
  width: 16.66666667%;
}
.col-1 {
  width: 8.33333333%;
}
.col-20 {
  width: 20%;
}
.letter-space-2{
  letter-spacing: 2px;
}
.color-white{
  color:white;
}
.color-black{
  color:black;
}
.position-relative{
  position: relative;
}
.position-absolute{
  position: absolute;
}
.font-weight-300{
  font-weight: 300;
}
.font-weight-500{
  font-weight: 500;
}
.font-weight-700{
  font-weight: 700;
}
